<template>
  <div>
    <Jdd-Card :padding="16" style="margin-bottom:16px;">
      <div style="font-size: 16px;color: #515A6E;">卡片列表</div>
      <div style="line-height:28px;margin-top:8px;">
        卡片式设计可以拓展信息块的视觉深度和突出可操作性。一般根据信息栏的内容而定，当信息的【内容较为复杂】且要【强调操作】时，卡片是个好选择。
        B端产品中卡片列表的使用常见于监控图-数据指标的合成展示、系统首页-各产品的集合介绍
      </div>
    </Jdd-Card>
    <div style="display:flex;margin-left:-8px;flex-wrap:wrap;margin-right:-8px;">
      <Jdd-Card :padding="0" class="card-item-add">
        <div style="cursor: pointer;">
          <Jdd-Icon type="md-add" size="20" />
          <span style="font-size: 16px;;marginn-left:4px;">新增应用</span>
        </div>
      </Jdd-Card>
      <Jdd-Card v-for="item in cardList" :key="item.id" :padding="0" class="card-item">
        <div class='img-card'>
          <img
            :src="require('../../../resource/images/fznc.png')"
            style="max-width:100%;max-height:100%;"
          />
        </div>
        <div class="content-card">
          <div class="content-card-title">负载内存</div>
          <div
            class="content-card-content"
          >产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产</div>
          <div class="content-card-operate">
            <div style="flex:1;text-align:center;">
              <span>操作一</span>
            </div>
            <div style="margin:6px 0px;border-right:1px solid #DDD;"></div>
            <div style="flex:1;text-align:center;">
              <span>操作一</span>
            </div>
          </div>
        </div>
      </Jdd-Card>
    </div>
  </div>
</template>
<script>
import productCardList from './productCardList.js'
export default productCardList
</script>
<style lang="less" scoped>
.card-item-add {
  margin: 8px 8px;
  height: 240px;
  width: 390px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dotted #dddee1;
}
.card-item-add:hover {
  box-shadow: 0 0 10px 0 rgba(45, 140, 240, 0.7);
}
.card-item {
  margin: 8px 8px;
  height: 240px;
  width: 390px;
  padding: 0px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  .img-card{
    position: absolute;
    left:0px;
    top:0px;
    transition: left 500ms ease;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .content-card {
    padding: 0px 16px;
    z-index: 1;
    position: absolute;
    height: 240px;
    width: 390px;
    left: 390px;
    //top: 240px;

    transition: left 300ms ease;
    &-title {
      margin: 20px;
      font-size: 16px;
      font-weight: 600;
      text-align: center;
    }
    &-content {
      height: 100px;
      margin: 20px 16px 16px 16px;
      text-align: center;
    }
    &-operate {
      border-top: 1px solid #ddd;
      display: flex;
      height: 48px;
      line-height: 48px;
      font-size: 16px;
      span:hover {
        color: #2d8cf0;
        cursor: pointer;
      }
    }
  }
}
.card-item:hover {
  box-shadow: 0 0 10px 0 rgba(45, 140, 240, 0.7);
}
.card-item:hover .content-card {
  left: 0px;
}
.card-item:hover .img-card{
  left: -390px;
}
</style>
